<template>
    <div>
       <el-dropdown class="dropdownContent" @visible-change="optionsVisibleChange" @command="optionsItemClick"
             placement="bottom-start" trigger="click">

            <el-input class="input" ref="input" :class="{typeable:inputTypeable}" v-model="localValue" v-on:input="input()" placeholder="请输入或选择内容" size="mini" ></el-input>

            <span class="arrowIcon">
                <i :class="isShowDropdown?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
            </span>

            <el-dropdown-menu class="dropdown" slot="dropdown" >
                <el-dropdown-item :command="item.name" v-for="(item,index) in options" :key="index">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script>
export default {
     props:{
        options:{
            type:Array,   // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
            required:true, // 此属性值为必填; 使用当前组件时，若未传入此值就会报错
        },
        // 外部的 v-model 默认是绑定在属性value上，因此此处予以接收
        value:String
    },
    data(){
        return {
            localValue:"",
            isShowDropdown:false,
            inputTypeable:false,
        }
    },
    mounted(){
        this.localValue = this.value;
    },
    methods:{
        optionsVisibleChange(status){
            this.isShowDropdown = status;
        },
        // 监听菜单项点击事件
        optionsItemClick(command){
            this.localValue = command;

            if(this.localValue == '其他'){
                this.localValue = "";
                this.inputTypeable = true;
                this.$refs.input.focus();
            }else{
                this.inputTypeable = false;
                this.$refs.input.blur();
            }

            this.$emit('updateValue',this.localValue);
            this.$emit("input",this.localValue);
        },
        // 监听input输入事件
        input(){

            this.$emit('updateValue',this.localValue);
            this.$emit("input",this.localValue);
        }
    },
    model:{
        prop: 'value',
        // 这个事件名可以随意写，它实际上是规定了子组件要更新父组件值需要注册的方法
        event: 'updateValue'
    },
    watch: {
        // 监听外部对value的改变
        value(){
            this.localValue = this.value;
        }
    }

}
</script>


<style scoped>

.dropdownContent{
    position: relative;
    width: 100%;
}
.dropdown{
    max-height: 260px;
    overflow-y: auto;
}
.arrowIcon{
    display: flex;
    align-items: center;
    cursor: pointer;
    
    color: #C0C4CC;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;

    pointer-events: none;
}

.input{
    cursor: pointer;
}
.input >>> input{
    pointer-events: none;
    outline:none;
    -moz-outline:none;
}
.input.typeable >>> input{
    pointer-events: auto;
}

</style>